---
title: "Navbar"
description: "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more."
---

import {navbarContent} from "@/content/components/navbar";

# Navbar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.

<ComponentLinks component="navbar" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add navbar",
    npm: "npm install @heroui/navbar",
    yarn: "yarn add @heroui/navbar",
    pnpm: "pnpm add @heroui/navbar",
    bun: "bun add @heroui/navbar"
  }}
/>


## Import

HeroUI exports 7 navbar-related components:

- **Navbar**: The main component of navbar.
- **NavbarBrand**: The component for branding.
- **NavbarContent**: The component for wrapping navbar items.
- **NavbarItem**: The component for navbar item.
- **NavbarMenuToggle**: The component for toggling navbar menu.
- **NavbarMenu**: The component for wrapping navbar menu items.
- **NavbarMenuItem**: The component for navbar menu item.

<ImportTabs
  commands={{
    main: `import {
    Navbar, 
    NavbarBrand, 
    NavbarContent, 
    NavbarItem, 
    NavbarMenuToggle,
    NavbarMenu,
    NavbarMenuItem
} from "@heroui/react";`,
    individual: `import {
    Navbar, 
    NavbarBrand, 
    NavbarContent, 
    NavbarItem, 
    NavbarMenuToggle,
    NavbarMenu,
    NavbarMenuItem
} from "@heroui/navbar";`,
  }}
/>

## Usage

<CodeDemo
  asIframe
  title="Usage"
  previewHeight="500px"
  iframeSrc="/examples/navbar/usage"
  files={navbarContent.usage}
/>

### Static

You can use the `position` prop to make the navbar static positioned (the default behavior is `sticky`).

<CodeDemo
  asIframe
  title="Static"
  previewHeight="500px"
  iframeSrc="/examples/navbar/static"
  files={navbarContent.staticPosition}
/>

### Hide on scroll

It is possible to hide the navbar on scroll by using the `shouldHideOnScroll` prop.

<CodeDemo
  asIframe
  title="Hide on scroll"
  previewHeight="500px"
  iframeSrc="/examples/navbar/hide-on-scroll"
  files={navbarContent.hideOnScroll}
/>

### With Menu

You can use the `NavbarMenuToggle` and `NavbarMenu` components to display a togglable menu.

<CodeDemo
  asIframe
  title="With Menu"
  iframeInitialWidth={420}
  previewHeight="600px"
  iframeSrc="/examples/navbar/with-menu"
  files={navbarContent.withMenu}
/>

If you want to remove the `open` / `close` animation, you can pass the `disableAnimation={true}` prop to `Navbar` component.

<CodeDemo
  asIframe
  title="With Menu"
  iframeInitialWidth={420}
  previewHeight="600px"
  iframeSrc="/examples/navbar/disable-menu-animation"
  files={navbarContent.disableMenuAnimation}
/>

### Controlled Menu

You can use the `isMenuOpen` and `onMenuOpenChange` props to control the navbar menu state.

<CodeDemo
  asIframe
  title="Controlled Menu"
  iframeInitialWidth={420}
  previewHeight="600px"
  iframeSrc="/examples/navbar/controlled-menu"
  files={navbarContent.controlledMenu}
/>

### With Border

You can use the `isBordered` prop to add a bottom border to the navbar.

<CodeDemo
  asIframe
  title="Adding a bottom border"
  previewHeight="500px"
  iframeSrc="/examples/navbar/bordered"
  files={navbarContent.bordered}
/>

### Disabling Blur

Navbar has a blur effect by default. You can disable it by using the `isBlurred=false` prop.

<CodeDemo
  asIframe
  title="Disabling blur"
  previewHeight="500px"
  iframeSrc="/examples/navbar/disabled-blur"
  files={navbarContent.disabledBlur}
/>

### With Dropdown Menu

It is possible to use the [Dropdown](/docs/components/dropdown) component to display a dropdown menu as navbar item.

<CodeDemo
  asIframe
  title="With Dropdown Menu"
  previewHeight="600px"
  iframeSrc="/examples/navbar/with-dropdown-menu"
  files={navbarContent.withDropdownMenu}
/>

### With Avatar

Example of a navbar with avatar and dropdown menu.

<CodeDemo
  asIframe
  title="With Avatar"
  previewHeight="420px"
  iframeSrc="/examples/navbar/with-avatar"
  files={navbarContent.withAvatar}
/>

### With Search Input

Example of a navbar with search input.

<CodeDemo
  asIframe
  title="With Search Input"
  previewHeight="420px"
  iframeSrc="/examples/navbar/with-search-input"
  files={navbarContent.withSearchInput}
/>

### Customizing the active item

When the `NavbarItem` is active, it will have a `data-active` attribute. You can use this attribute to customize it.

<CodeDemo
  asIframe
  title="Customizing the active item"
  previewHeight="420px"
  iframeSrc="/examples/navbar/custom-active-item"
  files={navbarContent.customActiveItem}
/>

## Slots

- **base**: The main slot for the navbar. It takes the full width of the parent and wraps the navbar elements including the menu.
- **wrapper**: The slot that contains the navbar elements such as `brand`, `content` and `toggle`.
- **brand**: The slot for the `NavbarBrand` component.
- **content**: The slot for the `NavbarContent` component.
- **item**: The slot for the `NavbarItem` component.
- **toggle**: The slot for the `NavbarMenuToggle` component.
- **toggleIcon**: The slot for the `NavbarMenuToggle` icon.
- **menu**: The slot for the `NavbarMenu` component.
- **menuItem**: The slot for the `NavbarMenuItem` component.

## Data Attributes

`Navbar` has the following attributes on the `base` element:

- **data-menu-open**:
  Indicates if the navbar menu is open.
- **data-hidden**:
  Indicates if the navbar is hidden. It is used when the `shouldHideOnScroll` prop is `true`.

`NavbarContent`

- **data-justify**:
  The justify content of the navbar content. It takes into account the correct space distribution.

`NavbarItem` has the following attributes on the `base` element:

- **data-active**:
  Indicates if the navbar item is active. It is used when the `isActive` prop is `true`.

`NavbarMenuToggle` has the following attributes on the `base` element:

- **data-open**:
  Indicates if the navbar menu is open. It is used when the `isMenuOpen` prop is `true`.
- **data-pressed**:
  When the navbar menu toggle is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html)
- **data-hover**:
  When the navbar menu toggle is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
- **data-focus-visible**:
  When the navbar menu toggle is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).

`NavbarMenuItem` has the following attributes on the `base` element:

- **data-active**:
  Indicates if the menu item is active. It is used when the `isActive` prop is `true`.

<Spacer y={4} />

## API

### Navbar Props

<APITable
  data={[
    {
      attribute: "children*",
      type: "ReactNode[]",
      description: "The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem",
      default: "-"
    },
    {
      attribute: "height",
      type: "string | number",
      description: "The height of the navbar.",
      default: "4rem (64px)"
    },
    {
      attribute: "position",
      type: "static | sticky",
      description: "The position of the navbar.",
      default: "sticky"
    },
    {
      attribute: "maxWidth",
      type: "sm | md | lg | xl | 2xl | full",
      description: "The max width of the navbar wrapper.",
      default: "lg"
    },
    {
      attribute: "parentRef",
      type: "React.RefObject<HTMLElement>",
      description: "The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not.",
      default: "window"
    },
    {
      attribute: "isBordered",
      type: "boolean",
      description: "Whether the navbar should have a bottom border or not.",
      default: "false"
    },
    {
      attribute: "isBlurred",
      type: "boolean",
      description: "Whether the navbar should have a blur effect or not.",
      default: "true"
    },
    {
      attribute: "isMenuOpen",
      type: "boolean",
      description: "Indicates if the navbar menu is open. (controlled)",
      default: "false"
    },
    {
      attribute: "isMenuDefaultOpen",
      type: "boolean",
      description: "Indicates if the navbar menu is open by default. (uncontrolled)",
      default: "false"
    },
    {
      attribute: "shouldHideOnScroll",
      type: "boolean",
      description: "Indicates if the navbar should hide on scroll.",
      default: "false"
    },
    {
      attribute: "motionProps",
      type: "MotionProps",
      description: "The motion props to control the visible / hidden animation. This motion is only available if the shouldHideOnScroll prop is set to true.",
      default: "-"
    },
    {
      attribute: "disableScrollHandler",
      type: "boolean",
      description: "Whether the navbar parent scroll event should be listened to or not.",
      default: "false"
    },
    {
      attribute: "disableAnimation",
      type: "boolean",
      description: "Whether the navbar menu animation should be disabled or not.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<'base' | 'wrapper' | 'brand' | 'content' | 'item' | 'toggle' | 'toggleIcon' | 'menu' | 'menuItem', string>>",
      description: "Allows to set custom class names for the navbar slots.",
      default: "-"
    }
  ]}
/>

### Navbar Events

<APITable
  data={[
    {
      attribute: "onMenuOpenChange",
      type: "(isOpen: boolean) => void",
      description: "Handler that is called when the navbar menu open state changes.",
      default: "-"
    },
    {
      attribute: "onScrollPositionChange",
      type: "(position: number) => void",
      description: "Handler that is called when the navbar parent element is scrolled. This event is only dispatched if disableScrollHandler is set to false or shouldHideOnScroll is set to true.",
      default: "-"
    }
  ]}
/>

### NavbarContent Props

<APITable
  data={[
    {
      attribute: "children*",
      type: "ReactNode[]",
      description: "The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem",
      default: "-"
    },
    {
      attribute: "justify",
      type: "start | center | end",
      description: "The justify content of the navbar content. It takes into account the correct space distribution.",
      default: "start"
    }
  ]}
/>

### NavbarItem Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The children to render as the navbar item.",
      default: "-"
    },
    {
      attribute: "isActive",
      type: "boolean",
      description: "Whether the navbar item is active or not.",
      default: "false"
    }
  ]}
/>

### NavbarMenuToggle Props

<APITable
  data={[
    {
      attribute: "icon",
      type: "ReactNode | ((isOpen: boolean | undefined) => ReactNode)",
      description: "The icon to render as the navbar menu toggle.",
      default: "-"
    },
    {
      attribute: "isSelected",
      type: "boolean",
      description: "Whether the navbar menu toggle is selected. (controlled)",
      default: "false"
    },
    {
      attribute: "defaultSelected",
      type: "boolean",
      description: "Whether the navbar menu toggle is selected by default. (uncontrolled)",
      default: "false"
    },
    {
      attribute: "srOnlyText",
      type: "string",
      description: "The text to be used by screen readers.",
      default: "open/close navigation menu"
    }
  ]}
/>

### NavbarMenuToggle Events

<APITable
  data={[
    {
      attribute: "onChange",
      type: "(isOpen: boolean) => void",
      description: "Handler that is called when the navbar menu toggle is pressed.",
      default: "-"
    }
  ]}
/>

### NavbarMenu Props

<APITable
  data={[
    {
      attribute: "children*",
      type: "ReactNode[]",
      description: "The children to render as the navbar menu. Usually a list of NavbarMenuItem components.",
      default: "-"
    },
    {
      attribute: "portalContainer",
      type: "HTMLElement",
      description: "The container element in which the navbar menu overlay portal will be placed.",
      default: "document.body"
    },
    {
      attribute: "motionProps",
      type: "MotionProps",
      description: "The motion props to control the open / close animation. This motion is only available if the disableAnimation prop is set to false.",
      default: "-"
    }
  ]}
/>

### NavbarMenuItem Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The children to render as the menu item.",
      default: "-"
    },
    {
      attribute: "isActive",
      type: "boolean",
      description: "Whether the menu item is active or not.",
      default: "false"
    }
  ]}
/>

### Types

```ts
export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
```
